<template>
  <div class="title">
    <span class="title_name">
      <span class="icon"></span>
      <span class="txt">{{ title }}</span>
    </span>
    <slot>
      <span v-if="isEdit" class="edit" @click="edit">编辑</span>
    </slot>
  </div>
</template>

<script lang="ts" setup>
  defineProps<{title: string; isEdit?: boolean}>()
  let emit = defineEmits(['edit'])
  // 编辑
  let edit = () => {
    emit('edit')
  }
</script>

<style scoped lang="less">
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    // padding: 10px 0;
    &_name {
      display: flex;
      align-items: center;

      .icon {
        width: 2px;
        height: 14px;
        background: #1890ff;

        margin-right: 10px;
      }

      .ant__icon {
        font-size: 30px;
      }

      .txt {
        font-size: 14px;
        font-weight: bold;
        color: #000;
      }
    }

    .edit {
      cursor: pointer;
      &:hover {
        color: #1890ff;
      }
    }
  }
</style>
